<template>
  <div>
    <!-- 加载相关Start -->
    <div class="body_shade" style="display: none"></div>
    <div class="load">
      <div id="wave" class="wave">
        <img src="@/assets/img/phoenix-loadinng.png" style="position: absolute; z-index: 999; width: 100%; left: 0; top: 0px" />
      </div>
    </div>
    <!-- 加载相关End -->
    <!--banner-->
    <div class="mask"></div>
    <!-- 首页整个大背景 -->
    <div class="container-fluid container-fluid-banner">
      <div class="container-gradient"></div>
      <div class="container container-bannerContnet">
        <h4 class="animated fadeInDown">
          <p>我们的职责是</p>
          为您提供更好的服务
        </h4>
      </div>
    </div>
    <!-- 我们是谁  我们做什么 我们如何做card -->
    <div class="container-fluid container-aboutUs">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-xs-12">
            <h4 class="wmss">我们是谁</h4>
            <p>梧桐树软件是一家提供B2B2C混业营销服务的高科技互联网公司</p>
            <a @click="triggerEvent('/abstract')" class="animated custom-cursor">查看简介</a>
          </div>
          <div class="col-md-4 col-xs-12">
            <h4 class="wmzsm">我们做什么</h4>
            <p>梧桐树软件助力推动互联网+战略，为各行业领域提供解决方案</p>
            <a @click="triggerEventHash('#shop')" class="animated custom-cursor">查看产品</a>
          </div>
          <div class="col-md-4 col-xs-12">
            <h4 class="wmrhz">我们如何做</h4>
            <p>与众多企业建立合作关系，逐步形成强大的人才、技术和品牌优势</p>
            <a @click="triggerEvent('/advertise')" class="animated custom-cursor">招贤纳士</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 暂时不知此区域作用 -->
    <div class="container-fluid container-swiper-yd-domain container-aboutUs">
      <div class="container">
        <div class="swiper-container1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="col-md-4 col-xs-12">
                <h4 class="wmss">我们是谁</h4>
                <p>梧桐树软件是一家提供B2B2C混业营销服务的高科技互联网公司</p>
                <a href="abstract.html" class="animated custom-cursor">查看简介</a>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="col-md-4 col-xs-12">
                <h4 class="wmzsm">我们做什么</h4>
                <p>梧桐树软件助力推动互联网+战略，为各行业领域提供解决方案</p>
                <a href="product.html" class="animated">查看产品</a>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="col-md-4 col-xs-12">
                <h4 class="wmrhz">我们如何做</h4>
                <p>与众多企业建立合作关系，逐步形成强大的人才、技术和品牌优势</p>
                <a href="advertise.html" class="animated">招贤纳士</a>
              </div>
            </div>
          </div>

          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <!-- 领域card -->
    <div class="container-fluid container-domain container-domain-pc">
      <div class="container" style="padding: 0px">
        <div class="row domian-row-title">
          <div class="col-md-12">
            <h3>领域</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3 col-xs-12 finance wow fadeInUp" data-wow-delay=".4s">
            <h4>金融</h4>
            <div class="shade">
              <h3>金融</h3>
              <p>为多家商业银行、中国银联以及第三方支付公司提供技术支撑及服务</p>
            </div>
          </div>
          <div class="col-md-3 col-xs-12 tour wow fadeInUp" data-wow-delay=".5s">
            <h4>旅游</h4>
            <div class="shade">
              <h3>旅游</h3>
              <p>为喜爱自由行的高净值人士提供高性价比、高质量的个性化行程定制服务</p>
            </div>
          </div>
          <div class="col-md-3 col-xs-12 gov wow fadeInUp" data-wow-delay=".6s">
            <h4>政务</h4>
            <div class="shade">
              <h3>政务</h3>
              <p>为政府提供基于大数据的多元化政务解决方案，辅助政府工作，提升办事效率</p>
            </div>
          </div>
          <div class="col-md-3 col-xs-12 medical wow fadeInUp" data-wow-delay=".7s">
            <h4>医疗</h4>
            <div class="shade">
              <h3>医疗</h3>
              <p>利用物联网技术和大数据技术，打通医疗信息孤岛，提供全方位的解决方案</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="container-fluid container-domain-mob" style="padding: 0px; margin: 0px">
      <div class="container" style="padding: 0px; margin: 0px">
        <div class="row domian-row-title" style="padding: 0px; margin: 0px">
          <div class="col-md-12">
            <h3>领域</h3>
          </div>
        </div>
        <div class="row yd_row_ly">
          <div class="col-xs-10 col-xs-offset-1 finance">
            <div class="shade">
              <h3>金融</h3>
              <p>为多家商业银行、中国银联以及第三方支付公司提供技术支撑及服务</p>
            </div>
          </div>
          <div class="col-xs-10 col-xs-offset-1 tour">
            <div class="shade">
              <h3>旅游</h3>
              <p>为喜爱自由行的高净值人士提供高性价比、高质量的个性化行程定制服务</p>
            </div>
          </div>
          <div class="col-xs-10 col-xs-offset-1 gov">
            <div class="shade">
              <h3>政务</h3>
              <p>为政府提供基于大数据的多元化政务解决方案，辅助政府工作，提升办事效率</p>
            </div>
          </div>
          <div class="col-xs-10 col-xs-offset-1 medical">
            <div class="shade">
              <h3>医疗</h3>
              <p>利用物联网技术和大数据技术，打通医疗信息孤岛，提供全方位的解决方案</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 合作伙伴card -->
    <div class="container-fluid container-client hezuo_pc_group">
      <div class="container">
        <h3>合作伙伴</h3>
        <div class="row hezuo_content hezuo_pc">
          <div class="col-md-12">
            <div class="col-md-2 col-zdlg-2-5 hezuo1">
              <img src="@/assets/img/huaxia.png" />
            </div>
            <div class="col-md-2 col-zdlg-2-5 hezuo2">
              <img src="@/assets/img/xingye.png" style="height: 32px" />
            </div>
            <div class="col-md-2 col-zdlg-2-5 hezuo3">
              <img src="@/assets/img/pufa.png" />
            </div>
            <div class="col-md-2 col-zdlg-2-5 hezuo4">
              <img src="@/assets/img/qiluyinhang.png" style="height: 36px" />
            </div>
            <div class="col-md-2 col-zdlg-2-5 hezuo5">
              <img src="@/assets/img/minsheng.png" style="height: 30px" />
            </div>
          </div>
        </div>
        <div class="row hezuo_content hezuo_content2 hezuo_pc">
          <div class="col-md-12">
            <div class="col-md-2 col-zdlg-2-5 hezuo6">
              <img src="@/assets/img/dianxin.png" />
            </div>
            <div class="col-md-2 col-zdlg-2-5 hezuo7">
              <img src="@/assets/img/qilujiaotong.png" style="height: 34px" />
            </div>
            <div class="col-md-2 col-zdlg-2-5 hezuo8">
              <img src="@/assets/img/liantong.png" />
            </div>
            <div class="col-md-2 col-zdlg-2-5 hezuo9">
              <img src="@/assets/img/weijing.png" style="height: 30px" />
            </div>
            <div class="col-md-2 col-zdlg-2-5 hezuo10">
              <img src="@/assets/img/huowu.png" style="height: 38px; margin-top: -2px" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="container-fluid container-client hezuo_mob_group">
      <div class="container">
        <h3>合作伙伴</h3>
        <div class="row swiper-container mob-hz-group">
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="margin-left: 0px">
              <img src="@/assets/img/mob-hz1.png" style="height: 84px" />
            </div>
            <div class="swiper-slide" style="margin-left: 0px">
              <img src="@/assets/img/mob-hz2.png" style="height: 84px" />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <!-- 人才招聘card -->
    <div class="container-fluid container-join">
      <div class="container container-joinus">
        <div class="row">
          <h3>人才招聘</h3>
        </div>
        <div class="row container-join-row">
          <a href="https://jobs.zhaopin.com/666341921250051.htm" target="_blank">
            <div class="col-md-4 col-xs-12 job_mob wow left_job">
              <h5>Java高级工程师</h5>
              <span>工作年限：3年</span>
              <span>工作地点：济南</span>
              <p>负责公司产品功能模块开发与维护； 参与产品及项目的需求分析及系统设计； 编写相关的技术文档</p>
            </div>
          </a>
          <a href="https://jobs.zhaopin.com/666341921250052.htm" target="_blank">
            <div class="col-md-4 col-xs-12">
              <h5>Java中级工程师</h5>
              <span>工作年限：3年</span>
              <span>工作地点：济南</span>
              <p>根据需求分析，架构和代码规范进行相应的程序开发和单元测试； 查找以及修复程序错误</p>
            </div>
          </a>
          <a href="http://jobs.zhaopin.com/CC666341921J00140310801.htm?ssidkey=y&ss=201&ff=03&sg=33a84030cf30404c8a06a5ec852c1037&so=3" target="_blank">
            <div class="col-md-4 col-xs-12 job_mob wow right_job">
              <h5>测试开发工程师</h5>
              <span>工作年限：不限</span>
              <span>工作地点：济南</span>
              <p>完整全面的了解系统需求、业务流程、制定系统设置计划以及测试方案； 负责设计测试用例、完成测试用例</p>
            </div>
          </a>
        </div>
        <div class="row more-job">
          <a @click="triggerEvent({patch:'/advertise',istg:'notg'})" class="custom-cursor">更多职位<img src="@/assets/img/Shape.png" /></a>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="container-fluid container-contact">
      <div class="container">
        <div class="row">
          <div class="col-md-7" id="contact_ditu"></div>
          <div class="col-md-1 line_f"><span></span></div>
          <div class="col-md-4 contact_us">
            <h4>联系我们</h4>
            <address><a href="tel:0531-88796766">0531-88796766</a></address>
            <address><a href="mailto:sales@phoenix-tree.cn">sales@phoenix-tree.cn</a></address>
            <address>山东济南黄金时代广场F座26层</address>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import emitter from '@/utils/mitt'
function triggerEvent(path) {
  emitter.emit('customEvent', path)
}

function triggerEventHash(path) {
  emitter.emit('customEventHash', path)
}
onMounted(() => {
  //load动画
  $('.load').fadeOut(1000)
  var wave = (function () {
    var ctx
    var waveImage
    var canvasWidth
    var canvasHeight
    var needAnimate = false

    function init(callback) {
      var wave = document.getElementById('wave')
      var canvas = document.createElement('canvas')
      if (!canvas.getContext) return
      ctx = canvas.getContext('2d')
      canvasWidth = wave.offsetWidth
      canvasHeight = wave.offsetHeight
      canvas.setAttribute('width', canvasWidth)
      canvas.setAttribute('height', canvasHeight)
      wave.appendChild(canvas)
      waveImage = new Image()
      waveImage.onload = function () {
        waveImage.onload = null
        callback()
      }
      waveImage.src = '@/assets/img/wave.png'
    }

    function animate() {
      var waveX = 0
      var waveY = 0
      var waveX_min = -203
      var waveY_max = canvasHeight * 1.1
      var requestAnimationFrame =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          window.setTimeout(callback, 100)
        }

      function loop() {
        ctx.clearRect(0, 0, canvasWidth, canvasHeight)
        if (!needAnimate) return
        if (waveY < waveY_max) waveY += 1.5
        if (waveX < waveX_min) waveX = 0
        else waveX -= 3

        ctx.globalCompositeOperation = 'source-over'
        ctx.beginPath()
        ctx.arc(canvasWidth / 2, canvasHeight / 2, canvasHeight / 2, 0, Math.PI * 2, true)
        ctx.closePath()
        ctx.fill()

        ctx.globalCompositeOperation = 'source-in'
        ctx.drawImage(waveImage, waveX, canvasHeight - waveY)

        requestAnimationFrame(loop)
      }
      loop()
    }

    function start() {
      if (!ctx) return init(start)
      needAnimate = true
      setTimeout(function () {
        if (needAnimate) animate()
      }, 100)
    }

    function stop() {
      needAnimate = true
    }
    return {
      start: start,
      stop: stop
    }
  })()
  wave.start()
  // 另一个脚本
  //swiper-mob
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: 30,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    }
  })
  var swiper = new Swiper('.swiper-container1', {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    }
  })
  new WOW().init()
  nextTick(() => {
    // 地图相关
    //pc端
    var map1 = new BMap.Map('contact_ditu')
    var point1 = new BMap.Point(117.11933, 36.66879)
    map1.centerAndZoom(point1, 16)
    //移动端
    var myIcon = new BMap.Icon('/src/assets/img/mark.png', new BMap.Size(50, 50), {
      imageSize: new BMap.Size(35, 35) // 设置图片偏移
    })
    // 创建标注对象并添加到地图
    var marker1 = new BMap.Marker(new BMap.Point(117.11933, 36.66879), {
      icon: myIcon
    })

    map1.addOverlay(marker1)
    //	map2.addOverlay(marker2);

    var top_left_control = new BMap.ScaleControl({
      anchor: BMAP_ANCHOR_TOP_LEFT
    }) // 左上角，添加比例尺
    var top_left_navigation1 = new BMap.NavigationControl() //左上角，添加默认缩放平移控件
    var top_left_navigation2 = new BMap.NavigationControl() //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({
      type: BMAP_NAVIGATION_CONTROL_ZOOM
    })
    //添加控件和比例尺
    map1.addControl(top_left_navigation1)
  })
})
</script>
<style scoped>
@import '/oldwl/index.css';
.custom-cursor {
  cursor: pointer;
}
</style>

